<!--
 * @Description: 灌区首页-计划用水
-->


<template>
    <div class="planned-water-use">
      <a-card size="small">
        <template #title>
          <div class="title">
            <slot name="title"><InsertRowAboveOutlined :style="{ fontSize: '18px', color: token.colorPrimary }" /></slot>
            <span class="smart-margin-left10">用水指标</span>
          </div>
        </template>
        <a-table :dataSource="dataSource" :columns="columns" :pagination="false" :bordered="true" size="small" />
        <div class="echarts-box">
          <div class="planned-water-use-main" id="planned-water-use-main"></div>
        </div>
        <div class="echarts-footer-box">
          <a-tag style="width: 150px; height: 36px; text-align: center; line-height: 36px; font-size: 14px" color="#C23531">#2db7f5</a-tag>
          <a-tag style="width: 150px; height: 36px; text-align: center; line-height: 36px; font-size: 14px" color="#2F4554">#87d068</a-tag>
          <a-tag style="width: 150px; height: 36px; text-align: center; line-height: 36px; font-size: 14px" color="#61A0A8">#108ee9</a-tag>
        </div>
      </a-card>
    </div>
  </template>
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted, ref, computed } from 'vue';
  import { theme } from 'ant-design-vue';
  import myEchartsTheme from '/@/utils/echartsTheme.js';
  const { useToken } = theme;
  const { token } = useToken();
  const color = computed(() => {
    return token.colorPrimary;
  });
  onMounted(() => {
    setTimeout(() => {
      init();
    }, 1000);
  });
  // table 表格数据
  let dataSource = ref([
    {
      overallIndicators: 21 + '亿m³',
      agriculture: 10 + '万m³',
      ecology: 8 + '万m³',
      life: 3 + '万m³',
    },
  ]);
  
  const columns = [
    {
      title: '农业',
      align: 'center',
      dataIndex: 'agriculture',
      key: 'agriculture',
    },
    {
      title: '生态',
      align: 'center',
      dataIndex: 'ecology',
      key: 'ecology',
    },
    {
      title: '生活',
      align: 'center',
      dataIndex: 'life',
      key: 'life',
    },
    {
      title: '总指标',
      align: 'center',
      dataIndex: 'overallIndicators',
      key: 'overallIndicators',
    },
  ];
  // 初始化饼图
  function init() {
    let option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'right',
        orient: 'vertical',
      },
      series: [
        {
          name: '市区所属灌区用水指标',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 10, name: '农业' },
            { value: 8, name: '生态' },
            { value: 3, name: '生活' },
          ],
        },
      ],
    };
  
    var indicatorsChart = echarts.init(document.getElementById('planned-water-use-main'), myEchartsTheme);
    indicatorsChart.setOption(option);
  }
  </script>
    <style lang="less" scoped>
  .planned-water-use {
    .echarts-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .planned-water-use-main {
        width: 100%;
        height: 415px;
        background: #fff;
      }
    }
    .echarts-footer-box {
      width: 100%;
      display: flex;
      align-items: center;
      align-items: center;
      justify-content: space-around;
    }
  }
  
    // .title {
    //   display: flex;
    //   align-items: center;
    //   &::before {
    //     content: '';
    //     position: absolute;
    //     top: 3px;
    //     left: 0;
    //     width: 3px;
    //     height: 30px;
    //     background-color: v-bind('token.colorPrimary');
    //   }
      
    // }
  </style>